<template>
  <div class="login-container">
    <!-- <div class="login-logo">
			<span>算法演示</span>
		</div> -->
    <div class="login-content">
      <div class="login-content-main">
        <h4 class="login-content-title">个人算法训练平台</h4>
         <el-form ref="loginForm" :model="loginForm" :rules="loginRules" v-loading="loadingtwo">
           <el-form-item prop="username">
              <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                auto-complete="off"
                placeholder="密码"
                @keyup.enter.native="handleLogin"
              >
                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
              </el-input>
            </el-form-item>
            <el-form-item prop="code" v-if="captchaOnOff">
              <el-row>
                <el-col :span="16">
                  <el-input
                    v-model="loginForm.code"  
                    auto-complete="off"
                    placeholder="验证码"
                    @keyup.enter.native="handleLogin"
                  >
                    <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                  </el-input>
                </el-col>
                <el-col :span="8">
                   <div class="login-content-code">
                      <img :src="codeUrl" @click="getCode" class="login-content-code-img"/>
                    </div>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
                </el-col>
                <el-col :span="11">
                  <div style="float: right;" v-if="register">
                    <router-link class="link-type" :to="'/register'">立即注册</router-link>
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item class="login-animation-four">
              <el-button type="primary" style="width:100%" round @click.native.prevent="handleLogin" :loading="loading">
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-divider content-position="center" style="color: #707070;">其他登陆:</el-divider>
              <el-row style="margin-left:8%">
                <el-col :span="6">
                  <el-link :underline="false" @click="giteelogin" style="margin-top: 12%;"> 
                    <img src="@/assets/images/gitee.png" height="45" width="45">
                  </el-link>
                </el-col>
                <el-col :span="6">
                  <el-link :underline="false" @click="alipaylogin" style="margin-top: 12%;"> 
                    <img src="@/assets/images/alipay.png" height="45" width="45">
                  </el-link>
                </el-col>
                <el-col :span="6">
                  <el-link :underline="false" @click="qqpaylogin" style="margin-top: 12%;"> 
                    <img src="@/assets/images/QQ.png" height="45" width="45">
                  </el-link>
                </el-col>
                <el-col :span="6">
                  <el-link :underline="false" @click="weixinpaylogin" style="margin-top: 12%;"> 
                    <img src="@/assets/images/weixin.png" height="45" width="45">
                  </el-link>
                </el-col>
              </el-row>
            </el-form-item>
         </el-form>
      </div>
    </div>
    <div class="login-copyright">
			<div class="mb5 login-copyright-company">个人算法训练平台 © 2021-12 湘ICP备2021019703号-1版权所有</div>
			<div class="login-copyright-msg">联系方式：17674011342 微信与电话号码相同 此平台仅个人学习使用</div>
		</div>
  </div>
</template>

<script>
import { getCodeImg,giteerender,loginnotice,alipay,QqAuth} from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'


export default {
  name: "Login",
  data() {
    return {
      time: {
				txt: '',
				fun: null,
			},
      defaultHeight: {
        height: ""
      },
      timer: null,
      note: {
        backgroundImage: "url(" + require("@/assets/images/login-background.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        // minHeight: "550px",
        height: "36rem"
      },
      codeUrl: "",
      cookiePassword: "",
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" }
        ],
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }]
      },
      loading: false,
      loadingtwo: false,
      // 验证码开关
      captchaOnOff: true,
      // 注册开关
      register: true,
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        // console.log("2",route)
        this.redirect = route.query && route.query.redirect;
        // console.log("3",)
      },
      immediate: true
    }
  },
  created() {
    this.getCode();
    this.getCookie();
    this.getNotice();
    this.created();
  },
  methods: {
    //定义方法，获取高度减去头尾
    getHeight() {
      this.defaultHeight.height = window.innerHeight - 90 + "px";
    },
    created() {
      //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
      window.addEventListener("resize", this.getHeight);
      this.getHeight();
    },
    getNotice(){
      const h = this.$createElement;
      loginnotice().then(res => {
        for(let i=0;i<res.data.SysNotice.length;i++){
          this.timer=null;
          res.data.SysNotice[i].noticeContent= res.data.SysNotice[i].noticeContent.replace("<p>","")
          res.data.SysNotice[i].noticeContent= res.data.SysNotice[i].noticeContent.replace("</p>","")
          this.timer = window.setTimeout(() => {
          this.$notify({
              title: res.data.SysNotice[i].noticeContent,
              message: h('i', { style: 'color: #000000'}, res.data.SysNotice[i].noticeTitle), //#009efa
              position: 'top-left'
            })
          }, 0)
          // this.$notify({
          //   title: '标题名称',
          //   message: h('i', { style: 'color: teal'}, res.data.SysNotice[i].noticeTitle),
          //   position: 'top-left'
          // });
          // console.log(res.data.SysNotice[i]);
        }
      })
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaOnOff = res.data.captchaOnOff === undefined ? true : res.data.captchaOnOff;
        if (this.captchaOnOff) {
          this.codeUrl = "data:image/gif;base64," + res.data.img;
          this.loginForm.uuid = res.data.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    //gitee登陆
    giteelogin(){
      giteerender().then(res=>{
        this.loadingtwo=true
        if(res.code=200){
          //跳转到gitee授权页
          window.location.href= res.data.url;
        }
      }).catch(() => {
          this.loadingtwo = false;
      })
    },
     //支付宝登陆
    alipaylogin(){
      this.loadingtwo=true
      alipay().then(res=>{
        if(res.code=200){
          //跳转到gitee授权页
          window.location.href= res.data.url;
        }
      }).catch(() => {
          this.loadingtwo = false;
      })
    },
    //qq登陆
    qqpaylogin(){
      this.loadingtwo=true
      QqAuth().then(res=>{
        if(res.code=200){
          //跳转到授权页
          window.location.href= res.data.url;
        }
      }).catch(() => {
          this.loadingtwo = false;
      })
    },
    //微信登陆
    weixinpaylogin(){
      this.$message.error("暂不支持微信登陆")
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            if (this.captchaOnOff) {
              this.getCode();
            }
          });
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.login-container {
	width: 100%;
	height: 100%;
	background: url('https://gitee.com/lyt-top/vue-next-admin-images/raw/master/login/bg-login.png') no-repeat;
	background-size: 100% 100%;
	.login-logo {
		position: absolute;
		top: 30px;
		left: 50%;
		height: 50px;
		display: flex;
		align-items: center;
		font-size: 20px;
		color: var(--color-primary);
		letter-spacing: 2px;
		width: 90%;
		transform: translateX(-50%);
	}
	.login-content {
		width: 500px;
		padding: 20px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) translate3d(0, 0, 0);
		background-color: rgba(255, 255, 255, 0.99);
		border: 5px solid var(--color-primary-light-8);
		border-radius: 4px;
		transition: all 0.3s ease;
		overflow: hidden;
		z-index: 1;
		.login-content-main {
			margin: 0 auto;
			width: 80%;
			.login-content-title {
				color: #333;
				font-weight: 500;
				font-size: 22px;
				text-align: center;
				letter-spacing: 4px;
				margin: 15px 0 30px;
				white-space: nowrap;
				z-index: 5;
				position: relative;
				transition: all 0.3s ease;
			}
		}
		.login-content-main-sacn {
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 50px;
			overflow: hidden;
			cursor: pointer;
			transition: all ease 0.3s;
			&-delta {
				position: absolute;
				width: 35px;
				height: 70px;
				z-index: 2;
				top: 2px;
				right: 21px;
				background: var(--el-color-white);
				transform: rotate(-45deg);
			}
			&:hover {
				opacity: 1;
				transition: all ease 0.3s;
				color: var(--color-primary);
			}
			i {
				width: 47px;
				height: 50px;
				display: inline-block;
				font-size: 48px;
				position: absolute;
				right: 2px;
				top: -1px;
			}
		}
	}
	.login-copyright {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30px;
		text-align: center;
		color: var(--color-whites);
		font-size: 12px;
		opacity: 0.8;
		.login-copyright-company {
			white-space: nowrap;
		}
		.login-copyright-msg {
			@extend .login-copyright-company;
		}
	}
}
.login-animation-four {
	  animation-delay: 0.4s;
		margin-bottom: 5px;
}
.login-content-code {
		display: flex;
		align-items: center;
		justify-content: space-around;
		.login-content-code-img {
			width: 100%;
			height: 37px;
      margin-left: 1%;
			line-height: 40px;
			background-color: #ffffff;
			border: 1px solid rgb(220, 223, 230);
			color: #333;
			font-size: 16px;
			font-weight: 700;
			letter-spacing: 5px;
			text-indent: 5px;
			text-align: center;
			cursor: pointer;
			transition: all ease 0.2s;
			border-radius: 4px;
			user-select: none;
			&:hover {
				border-color: #c0c4cc;
				transition: all ease 0.2s;
			}
		}
	}
</style>
